<script lang="ts" setup>
import { ref, inject, watch } from 'vue';
import { cloneDeep } from 'lodash';
import { LiveInfo, SystemList } from '@/hooks/proto/status/live-status-hook';
const liveInfo: LiveInfo = inject('liveInfo')!;
const systemList = ref<SystemList[]>([]);
const clientCheckbox = ref<boolean>(true);
watch(liveInfo.systemList, (newVal) => {
  if (clientCheckbox.value) {
    systemList.value = cloneDeep(newVal);
  }
});
const changeCheckbox = (checkbox: boolean) => {
  if (checkbox) {
    systemList.value = liveInfo.systemList;
  }
};
const checkboxLabel = (checkbox: boolean) => {
  return checkbox ? '显示' : '隐藏';
};
const actionMessage = (message: string) => {
  if (message === 'enter') {
    return '进入了直播间';
  }
  if (message === 'favorite') {
    return '关注了主播';
  }
};
</script>

<template>
  <!-- <div class="home-container"> -->
  <div class="comment-list-container">
    <div class="title flex-ali pt8 pl8 pr8 pb8">
      <span class="flex-auto font14">全部评论</span>
      <el-button size="small" type="primary">导出评论</el-button>
    </div>
    <el-scrollbar height="280px">
      <div
        class="comment-list w100"
        v-if="liveInfo.speakList.length > 0"
        v-for="(data, i) in liveInfo.speakList"
        :key="i"
      >
        <span class="font13">{{ data.nickName }}：</span>
        <span class="font13">{{ data.chatMessage }}</span>
      </div>
      <el-empty description="暂无评论" v-if="liveInfo.speakList.length === 0" />
    </el-scrollbar>
  </div>
  <div class="comment-list-container client-container mt-2">
    <div class="title flex-ali pl8 pr8">
      <span class="flex-auto font14">实时客户来源</span>
      <el-checkbox v-model="clientCheckbox" :label="checkboxLabel(clientCheckbox)" @change="changeCheckbox($event)" />
    </div>
    <el-scrollbar height="280px">
      <div class="comment-list w100" v-if="systemList.length > 0" v-for="(data, i) in systemList" :key="i">
        <span class="font13">{{ data.nickName }}：</span>
        <span class="font13">{{ actionMessage(data.actionMessage) }}</span>
      </div>
      <el-empty description="暂无信息" v-if="systemList.length === 0" />
    </el-scrollbar>
  </div>
  <!-- </div> -->
</template>

<style lang="scss" scoped>
.comment-list-container {
  border-radius: 0.4em;
  background: var(--el-color-white);
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 6%);
  overflow: hidden;

  .title {
    border-bottom: 1px solid #f1f2f3;
    padding: 2px 0;
  }

  .comment-list {
    padding: 0.4em;

    span:nth-of-type(1) {
      word-wrap: break-word;
      color: #f97675;
    }

    span:nth-of-type(2) {
      word-break: break-all;
    }
  }
}
</style>
